<template>
	<view class="content">
		<view class="header">
			<image class="logo" @click="goindex()" :src="_baseURL + setting.site_logo" mode=""></image>
			<view class="nologin" v-if="showinfonav">
				<view class="to-login" @click="gologin()">登录</view>
				<!-- <view class="com-btn" @click="goregister()">注册</view> -->
			</view>
			<view v-else class="after-login">
				<view class="balance">
					<image class="jinbi" src="../../static/img/jinbi.png" mode=""></image>
					<view class="yue">${{userinfo.money}}</view>
					<image @click="getrefresh()" class="shuaxin" :class="isrefresh ? 'ssssxuanzhuan':''"
						src="../../static/img/shuaxin.png" mode=""></image>
					<view class="qianbao">
						<image src="../../static/img/qianbao.png" mode=""></image>
					</view>
				</view>
				<view class="com-my" @click="gouserindex()">
					<image src="../../static/img/avatar.webp" mode=""></image>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="user-info">
				<view class="info-left">
					<image class="avatar" src="../../static/img/avatar.webp" mode=""></image>
					<view class="info">
						<view style="font-size: 30rpx;font-weight: 700;">{{userinfo.name}}</view>
						<view class="IDs">
							<view>ID：{{userinfo.id}}</view>
							<image @click="copy(userinfo.id)" src="../../static/img/copy.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="info-right">
					<image class="xiaoxi" src="../../static/img/lingdang.png" mode="" @click="message()"></image>
					<image class="kefu" src="../../static/img/kefu.png" mode="" @click="gokefu()"></image>
				</view>
			</view>
			<view class="wallet-card">
				<view class="wallet">
					<view class="wallet-left">中心钱包</view>
					<view class="wallet-right">
						<view class="balances">{{userinfo.money}}</view>
						<image src="../../static/img/bizhong.png" mode=""></image>
					</view>
				</view>
				<view class="line"></view>
				<view class="submenu">
					<view class="cell" @click="gorecharge()">
						<image src="../../static/icon/23.png" mode=""></image>
						<view>充值</view>
					</view>
					<view class="cell" @click="gowithdraw()">
						<image src="../../static/icon/22.png" mode=""></image>
						<view>提现</view>
					</view>
					<view class="cell" @click="goreport()">
						<image src="../../static/icon/21.png" mode=""></image>
						<view>报表</view>
					</view>
					<view class="cell" @click="gotutorial()">
						<image src="../../static/icon/24.png" mode=""></image>
						<view>教程</view>
					</view>
					<view class="cell" @click="goanquan()">
						<image src="../../static/icon/25.png" mode=""></image>
						<view>安全</view>
					</view>
					<view class="cell" @click="gojiaoyi()">
						<image src="../../static/icon/26.png" mode=""></image>
						<view>交易</view>
					</view>
					<view class="cell" @click="gotouzhu()">
						<image src="../../static/icon/27.png" mode=""></image>
						<view>投注</view>
					</view>
					<view class="cell" @click="goinvitation()">
						<image src="../../static/icon/28.png" mode=""></image>
						<view>邀请</view>
					</view>
				</view>
			</view>
			<view class="van-cell-group">
				<!-- <view class="van-cell" @click="goreport()">
					<view class="van-cell__title">
						<image src="../../static/icon/6.png" mode=""></image>
						<view>输赢报表</view>
					</view>
					<image class="righticon" src="../../static/img/right.png" mode=""></image>
				</view> -->
				<view class="van-cell" @click="goproxyPartner()">
					<view class="van-cell__title">
						<image src="../../static/icon/8.png" mode=""></image>
						<view>代理合作</view>
					</view>
					<image class="righticon" src="../../static/img/right.png" mode=""></image>
				</view>
				<view class="van-cell" @click="gobuyCrypto()">
					<view class="van-cell__title">
						<image src="../../static/icon/7.png" mode=""></image>
						<view>购买货币</view>
					</view>
					<image class="righticon" src="../../static/img/right.png" mode=""></image>
				</view>
				<view class="van-cell" @click="goaccount()">
					<view class="van-cell__title">
						<image src="../../static/icon/9.png" mode=""></image>
						<view>账户设置</view>
					</view>
					<image class="righticon" src="../../static/img/right.png" mode=""></image>
				</view>
				<view class="van-cell" @click="gorelAppDownload()">
					<view class="van-cell__title">
						<image src="../../static/icon/10.png" mode=""></image>
						<view>VPN推荐</view>
					</view>
					<image class="righticon" src="../../static/img/right.png" mode=""></image>
				</view>
			</view>
			<view class="log-out" @click="openlp()">退出登录</view>
		</view>
		<uni-popup ref="logoutpopup" type="bottom">
			<view class="lpopup">
				<image @click="closelp()" class="lpclose" src="../../static/img/close2.png" mode=""></image>
				<view class="lptitle">退出登录</view>
				<view class="lptips">别忘了在您离开之前查看我们丰富的优惠活动！</view>
				<view class="lpbtns">
					<view class="lbtn" @click="logout()">退出登录</view>
					<view class="rbtn" @click="closelp()">取消</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getuserinfo,
		sysconfig
	} from '../../api/api.js'
	import { baseURL } from '../../api/http.js'
	export default {
		data() {
			return {
				showinfonav: true,
				userinfo: [],
				isrefresh: false,

				_baseURL: baseURL,
				setting: []
			}
		},
		onLoad() {
			if (uni.getStorageSync('userinfo')) {
				this.userinfo = JSON.parse(uni.getStorageSync('userinfo'))
			}
			if (uni.getStorageSync('token')) {
				this.showinfonav = false
				this.getuserinfo()
			}
			this.getsysconfig()
		},
		methods: {
			goaccount() {
				uni.navigateTo({
					url: '/pages/userInfo/userInfo'
				})
			},
			gotouzhu() {
				uni.navigateTo({
					url: '/pages/betRecord/betRecord'
				})
			},
			goreport() {
				uni.navigateTo({
					url: '/pages/report/report'
				})
			},
			message() {
				uni.navigateTo({
					url: '/pages/message/index'
				})
			},
			gojiaoyi() {
				uni.navigateTo({
					url: '/pages/transRecord/chongzhi'
				})
			},
			goanquan() {
				uni.navigateTo({
					url: '/pages/safeCenter/safeCenter'
				})
			},
			goindex() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			gorelAppDownload() {
				uni.navigateTo({
					url: '/pages/user/relAppDownload'
				})
			},
			gobuyCrypto() {
				uni.navigateTo({
					url: '/pages/user/buyCrypto'
				})
			},
			goinvitation() {
				uni.navigateTo({
					url: '/pages/index/invitation'
				})
			},
			gotutorial() {
				uni.navigateTo({
					url: '/pages/user/tutorial'
				})
			},
			goproxyPartner() {
				uni.navigateTo({
					url: '/pages/user/proxyPartner'
				})
			},
			getrefresh() {
				let that = this;
				this.isrefresh = true;
				setTimeout(function() {
					that.isrefresh = false;
				}, 1000)
				this.getuserinfo();
			},
			getuserinfo() {
				getuserinfo().then(res => {
					if (res.data.status.errorCode == 0) {
						this.userinfo = res.data.data.member
					} else {
						uni.showToast({
							title: res.data.status.msg,
							icon: 'error',
							duration: 2000
						});
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getsysconfig() {
				sysconfig().then(res => {
					if (res.data.status.errorCode == 0) {
						this.setting = res.data.data
					} else {
						uni.showToast({
							title: res.data.status.msg,
							icon: 'error',
							duration: 2000
						});
					}
				}).catch(err => {
					console.log(err)
				})
			},
			copy(value) {
				uni.setClipboardData({
					data: value,
					success: function() {
						//调用方法成功
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});
					}
				})
			},
			gokefu() {
				window.open(this.setting.service_link)
			},
			logout() {
				uni.removeStorageSync('token')
				uni.removeStorageSync('userinfo')
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			openlp(){
				this.$refs.logoutpopup.open()
			},
			closelp(){
				this.$refs.logoutpopup.close()
			},
			gologin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			goregister() {
				uni.navigateTo({
					url: '/pages/login/register'
				})
			},
			gorecharge() {
				uni.navigateTo({
					url: '/pages/user/recharge'
				})
			},
			gowithdraw() {
				uni.navigateTo({
					url: '/pages/user/withdraw'
				})
			}
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	.content {
		width: 100%;
		min-height: 100vh;
		background: #212125;
	}

	.header {
		width: 100%;
		height: 112rpx;
		padding-right: 24rpx;
		padding-left: 39rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.logo {
		width: 100rpx;
		height: 80rpx;
	}

	.nologin,
	.after-login {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.to-login {
		word-break: break-all;
		text-align: center;
		font-weight: 700;
		margin-right: 40rpx;
		font-size: 26rpx;
		color: #fff;
		padding-top: 8rpx;
	}

	.com-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 204rpx;
		height: 64rpx;
		background: #fee619;
		box-shadow: 0 8rpx 0 0 #d9a715, inset 0 0 24rpx 6rpx rgba(243, 48, 48, .34), 0 4rpx 12rpx 6rpx rgba(255, 123, 1, .34);
		border-radius: 12rpx;
		font-weight: 700;
		padding-top: 8rpx;
		font-size: 26rpx;
		color: #1c1e22;
		word-break: break-all;
		text-align: center;
	}

	.balance {
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-width: 160rpx;
		max-width: 400rpx;
		height: 70rpx;
		padding-left: 32rpx;
		background: #14161a;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}

	.jinbi {
		width: 32rpx;
		height: 28rpx;
	}

	.yue {
		font-size: 30rpx;
		padding-left: 10rpx;
		font-weight: 600;
		color: #fff;
	}

	.shuaxin {
		width: 30rpx;
		height: 30rpx;
		margin-left: 22rpx;
		margin-right: 16rpx;
	}

	.ssssxuanzhuan {
		animation: rotatefresh 1s;
	}

	@keyframes rotatefresh {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
			transition: all 0.6s;
		}
	}

	.qianbao {
		width: 72rpx;
		height: 66rpx;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fee619;
		box-shadow: 0 2rpx 0 0 #d9a715, inset 0 0 24rpx 6rpx rgba(243, 48, 48, .34), 0 4rpx 12rpx 6rpx rgba(255, 123, 1, .34);
	}

	.qianbao image {
		width: 30rpx;
		height: 30rpx;
	}

	.com-my {
		width: 70rpx;
		height: 78rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 30rpx;
		padding-top: 8rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.com-my image {
		width: 70rpx;
		height: 70rpx;
	}

	.main {
		position: relative;
		padding: 40rpx 24rpx 0 24rpx;
		padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
	}

	.user-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 48rpx;
	}

	.info-left {
		padding-left: 12rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
	}

	.info {
		margin-left: 24rpx;
		color: #fff;
	}

	.IDs {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.IDs view {
		color: #a6aeb9;
		margin-right: 20rpx;
		font-size: 26rpx;
	}

	.IDs image {
		width: 30rpx;
		height: 30rpx;
	}

	.info-right {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		align-self: flex-start;
	}

	.xiaoxi {
		width: 38rpx;
		height: 34rpx;
		margin-right: 20rpx;
	}

	.kefu {
		width: 40rpx;
		height: 36rpx;
	}

	.wallet-card {
		background: #24262a;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;
		padding: 28rpx 20rpx 40rpx 20rpx;
		margin-bottom: 16rpx;
	}

	.wallet {
		width: 100%;
		color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wallet-left {
		font-weight: 700;
		margin-right: 12rpx;
		font-size: 28rpx;
	}

	.wallet-right {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.balances {
		font-weight: 700;
		color: #fff;
		margin-right: 8rpx;
		font-size: 34rpx;
	}

	.wallet-right image {
		width: 36rpx;
		height: 36rpx;
	}

	.line {
		width: 100%;
		background: #303439;
		height: 2rpx;
		margin-top: 26rpx;
		margin-bottom: 40rpx;
	}

	.submenu {
		width: 100%;
		display: grid;
		justify-content: space-between;
		grid-template-columns: repeat(4, 25%);
		grid-gap: 32rpx 0;
	}

	.cell {
		position: relative;
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: column;
		color: #fff;
	}

	.cell image {
		width: 40rpx;
		height: 40rpx;
	}

	.cell view {
		margin-top: 16rpx;
		font-size: 26rpx;
	}

	.van-cell-group {
		margin-bottom: 32rpx;
	}

	.van-cell {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 26rpx 40rpx;
		background-color: #24262b;
		width: 100%;
		position: relative;
		font-size: 28rpx;
		line-height: 48rpx;
		color: #96a5b2;
	}

	.van-cell__title {
		flex: 1;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.van-cell__title image {
		width: 36rpx;
		height: 32rpx;
		margin-right: 26rpx;
	}

	.van-cell__title view {
		font-size: 26rpx;
		color: #fff;
	}

	.righticon {
		width: 32rpx;
		height: 32rpx;
	}

	.log-out {
		margin-bottom: 40rpx;
		color: #a6aeb9;
		font-size: 28rpx;
		text-align: center;
	}
	
	.lpopup{
		width: 100%;
		background: #1b1d23;
		padding: 32rpx 40rpx 60rpx 40rpx;
		border-top-right-radius: 32rpx;
		border-top-left-radius: 32rpx;
		position: relative;
	}
	.lpclose{
		position: absolute;
		top: 32rpx;
		right: 32rpx;
		z-index: 1;
		width: 32rpx;
		height: 32rpx;
	}
	.lptitle{
		margin-bottom: 60rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #fff;
		line-height: 1.15;
	}
	.lptips{
		color: #fff;
		text-align: center;
		font-size: 28rpx;
		line-height: 1.15;
	}
	.lpbtns{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 60rpx;
	}
	.lbtn{
		width: 310rpx;
		height: 100rpx;
		background: #3d4049;
		font-size: 28rpx;
		border-radius: 12rpx;
		font-weight: 700;
		color: #fff;
		text-align: center;
		line-height: 100rpx;
	}
	.rbtn{
		width: 310rpx;
		height: 98rpx;
		text-align: center;
		line-height: 98rpx;
		color: #1c1e22;
		font-weight: 700;
		border-radius: 12rpx;
		font-size: 28rpx;
		background: #fee619;
		box-shadow: inset 0 0 10rpx 4rpx rgba(234, 27, 27, .32), 0 4rpx 16rpx 0 rgba(255, 202, 1, .52);
	}
</style>